<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>

        <h2>学生姓名：{{studentName}}</h2>
        <hr>
    </div>
</template>

<script>
    export default {
        name: 'School',
        data() {
            return {
                name: '尚硅谷',
                address: '北京市昌平区',
                studentName: ''
            }
        },
        mounted() {
            console.log('School', this);
            this.$bus.$on('hello', (studentName) => {
                console.log('我是School 组件，收到了数据', studentName);

                this.studentName = studentName;
            });
        },

        // methods: {
        //     getStudentName(studentName) {
        //         console.log('我是School 组件，收到了数据', studentName);
        //         this.studentName = studentName;
        //     }
        // },
        // mounted() {
        //     console.log('School', this);
        //     this.$bus.$on('hello', this.getStudentName());
        // },

        beforeDestroy() {
            // 销毁hello 自定义事件
            this.$bus.$off('hello');
        },
    }
</script>

<style scoped>
    .school {
        background-color: rgb(181, 33, 33);
        padding: 5px;
    }
</style>